<template>
    <div class="login">
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px" class="container">
            <el-form-item label="账号" prop="username">
                <el-input v-model="ruleForm.username" type="text" autocomplete="off" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="ruleForm.password" type="password" autocomplete="off" />
            </el-form-item>

            <!--  age 的表单 -->
            <!-- <el-form-item label="年龄" prop="age">
        <el-input v-model="ruleForm.age" type="text" autocomplete="off" />
      </el-form-item> -->

            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)" class="login-btn">登录</el-button>
                <el-button @click="resetForm(ruleFormRef)" class="reset-btn">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { getLogin } from '@/api/login'

import { useStore } from 'vuex'
import { setLocalToken } from '@/utils/lib'

import { useRouter } from 'vue-router'
const router = useRouter()

const store = useStore()

const ruleFormRef = ref()

const validateName = (rule, value, callback) => {
    console.log(value) //  获取的输入框内容
    if (value === '') {
        callback(new Error('用户名不能为 空'))
    } else {
        callback()
    }
}

const validatePass = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('密码不能为空'))
    } else {
        callback()
    }
}

const ruleForm = reactive({
    username: 'admin',
    password: '123456',
    // age: '',
})

const rules = reactive({
    username: [{ validator: validateName, trigger: 'blur' }],
    password: [{ validator: validatePass, trigger: 'blur' }],

    // 基础验证
    // age: [
    //   { required: true, message: '不能为空', trigger: 'blur' },
    //   { min: 3, max: 7, message: '长度不能小于3 大于7', trigger: 'blur' },
    // ],
})

const submitForm = (formEl) => {
    if (!formEl) return
    formEl.validate(async (valid) => {
        //  如果通过 表示为真
        // 发送请求  通过  存储token   用户名   跳转到home页面
        // 不通过就给出提示
        //
        let {
            data,
            meta: { msg, status },
        } = await getLogin(ruleForm)

        if (status == 200) {
            // 存储token   用户名   跳转到home页面
            setLocalToken(data.token)
            store.commit('setToken', data.token)
            store.commit('setUserName', data.username)
            // setToken(data.token) //  用户名 token
            router.replace('/')
        }
    })
}

const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>

<style lang="scss" scoped>
.login {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #2f4050;

    .container {
        position: absolute;
        left: 0;
        right: 0;
        width: 400px;
        padding: 30px 40px 15px 40px;
        margin: 200px auto;
        background: white;

        .avatar {
            position: relative;
            left: 50%;
            width: 120px;
            height: 120px;
            margin-left: -60px;
            margin-top: -60px;
            box-sizing: border-box;
            border-radius: 50%;
            border: 10px solid #fff;
            box-shadow: 0 1px 5px #ccc;
            overflow: hidden;
        }

        .login-btn,
        .reset-btn {
            width: 40%;
        }
    }
}
</style>
